// BarItem组件 - 用于创建带有特定样式的GTK4 Box元素
// 依赖库:
// - astal/gtk4: 提供GTK4的核心功能支持
// - astal/gtk4/widget: 提供Box组件的属性类型定义
import { App, Gtk, Gdk } from "astal/gtk4";
import { BoxProps } from "astal/gtk4/widget";

// 定义BarItem的样式枚举
export enum BarItemStyle {
	transparent = "transparent",  // 透明背景样式
	primary = "primary",          // 主要颜色样式
	primaryContainer = "primary_container",  // 主要颜色容器样式
}

// 组件属性类型定义
type Props = BoxProps & {
	itemStyle?: BarItemStyle;  // 可选，指定BarItem的样式类型
	child?: JSX.Element;       // 可选，Box中包含的子元素
};

// 默认导出的BarItem组件
export default ({ child, itemStyle, cssName, ...props }: Props) => {
	/**
	 * 组件实现说明:
	 * 1. 创建一个GTK Box元素
	 * 2. 设置CSS类名，包含基础类、样式类和自定义类
	 * 3. 子元素垂直居中
	 * 4. 传递所有其他Box属性
	 */
	return (
		<box
			cssClasses={[
				'bar_item',       // 基础样式类
				itemStyle || '',    // 样式类(如果有)
				cssName || ''       // 自定义类名(如果有)
			].filter(Boolean)}      // 过滤掉空字符串
			valign={Gtk.Align.BASELINE_CENTER}  // 子元素垂直居中
			{...props}                 // 传递所有其他Box属性
		>
			{child}  {/* 渲染子元素 */}
		</box>
	);
};